<template>
  <view class="page-total">
    <view class="tab-list">
      <view v-for="(item, index) in tabBarList" :key="index" class="list" @click="onTabBar(index)">
        <image
          v-show="tabBarShow === index"
          :src="item.acImg"
          :style="{
            width: index === 2 ? '80rpx' : '48rpx',
            borderRadius: index === 2 ? '12px' : '0px',
            height: index === 2 ? '80rpx' : '48rpx'
          }"
        ></image>
        <image
          v-show="tabBarShow !== index"
          :src="item.img"
          :style="{
            width: index === 2 ? '80rpx' : '48rpx',
            borderRadius: index === 2 ? '12px' : '0px',
            height: index === 2 ? '80rpx' : '48rpx'
          }"
        ></image>
        <text :class="{ action: tabBarShow === index }">
          {{ item.name }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue"
import { userInfo } from "/store/userInfo/index.js"
import { storeToRefs } from "pinia"

uni.hideTabBar()

const store = userInfo()
const { state } = storeToRefs(store)

defineProps({
  tabBarShow: {
    type: Number,
    default: 0
  }
})

const checkboxValue = ref([""])

const isPrivacy = ref(false)

const onTabBar = (index) => {
  // if (index === 1) {
  //   uni.getLocation({
  //     type: "gcj02", //返回可以用于uni.openLocation的经纬度
  //     success: function (res) {
  //       console.log(res)
  //       const latitude = res.latitude
  //       const longitude = res.longitude
  //       uni.openLocation({
  //         latitude: latitude,
  //         longitude: longitude,
  //         success: function () {
  //           console.log("success")
  //         }
  //       })
  //     }
  //   })
  //   return
  // }
  if (index === 2) {
    uni.showToast({
      title: "敬请期待",
      icon: "none"
    })
    return
  }
  // if (index === 4) {
  //   elePopup.value.open()
  //   return
  // }
  uni.switchTab({
    url: tabBarList.value[index].pagePath
  })
}

const tabBarList = computed(() => [
  {
    index: 0,
    name: "首页",
    img: "/static/tabBar/find.png",
    acImg: "/static/tabBar/findSelect.png",
    pagePath: "/pages/index/index"
  },
  {
    index: 1,
    name: "导航",
    img: "/static/tabBar/daohang.png",
    acImg: "/static/tabBar/daohangSelect.png",
    pagePath: "/pages/navigate/navigate"
  },
  {
    index: 2,
    name: "",
    img: "/static/tabBar/fabu.png",
    acImg: "/static/tabBar/fabu.png"
  },
  {
    index: 3,
    name: "互动",
    img: "/static/tabBar/interactive.png",
    acImg: "/static/tabBar/interactiveSelect.png",
    pagePath: "/pages/carSelect/carSelect"
  },
  {
    index: 4,
    name: "我的",
    img: "/static/tabBar/mine.png",
    acImg: "/static/tabBar/mineSelect.png",
    pagePath: "/pages/personal/personal"
  }
])
</script>

<style scoped lang="scss">
@import "cc-myTabbar.scss";
</style>
